<style>
  .layui-form-label{
    text-align: left;
  }
</style>
<title>菜单添加</title>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>菜单</cite></a>
    <a><cite>菜单列表</cite></a>
    <a><cite>添加菜单</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-spacel5">
    <div class="layui-card">
    <div class="layui-card-header">添加菜单</div>
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="component-form-group">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label required">菜单名称</label>
            <div class="layui-input-inline">
              <input type="text" name="menuName" lay-verify="required|menuName" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">菜单样式</label>
            <div class="layui-input-inline">
              <input type="text" name="menuStyle"  autocomplete="off" placeholder="请输入菜单样式" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label required">上级菜单</label>
            <div class="layui-input-inline">
              <input type="hidden" name="parentMenuId" id="parentMenuId"/>
              <input type="text" name="parentMenuName" id="parentMenuName" autocomplete="off" placeholder="请输选择上级菜单" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label required">页面路径</label>
            <div class="layui-input-inline">
              <input type="text" name="url" lay-verify="required|text" autocomplete="off" placeholder="请输入菜单页面路径" class="layui-input">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">菜单序号</label>
            <div class="layui-input-inline">
              <input type="number" name="menuOrder" lay-verify="required|menuOrder" placeholder="菜单序号" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
          <label class="layui-form-label">菜单编码</label>
          <div class="layui-input-inline">
            <input type="text" name="menuCode" lay-verify="menuCode" placeholder="菜单编码" autocomplete="off" class="layui-input">
          </div>
         </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
              <select name="status" lay-verify="required">
                <option value="0">有效</option>
                <option value="1">无效</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">备注</label>
          <div class="layui-input-block">
            <textarea type="text" name="remark" placeholder="备注" class="layui-textarea"></textarea>
          </div>
        </div>        
        <div class="layui-form-item" style="text-align: right">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-menu">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <a lay-href="/menu/list" class="layui-btn layui-btn-primary">
              <i class="layui-icon layui-icon-return"></i>返回
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
  </div>
</div>
<style>
  .liactive{
    background: #1E9FFF;
  }
</style>
<script>
  var $menuId,$menuName;
layui.use(['admin', 'form', 'laydate','tree','common'], function(){
  var $ = layui.$,admin = layui.admin,element = layui.element
  ,layer = layui.layer
  ,laydate = layui.laydate
  ,form = layui.form,basePath = layui.common.basePath;
  form.render(null,'component-form-group');
  laydate.render({
    elem: '#LAY-component-form-group-date'
  });
  /* 监听提交 */
  form.on('submit(component-form-ts-menu)', function(data){
    admin.req({
       url: basePath + 'system/tsMenu/saveTsMenu.do' //实际使用请改成服务端真实接口
      ,data: data.field
      ,type:'get'
      ,done: function(res){
           if(res.code == 0){
             layer.msg(res.msg, {
               offset: '15px'
               ,icon: 1
               ,time: 1000
             }, function(){
               location.hash = '/menu/list';
             });
           }else {
             layer.msg(res.msg, {
               offset: '15px'
               , icon: 2
               , time: 1000
             }, function () {
             });
             return ;
           }
      },success:function (res) {
        console.log(res)
      },error:function (res) {
        console.log(res)
      }});
    return false;
  });

  $("#parentMenuName").off('click');
  /* 加载菜单树 */
//  $("body").on('click','#parentMenuName',function () {

  $("#parentMenuName").on('click',function () {
    layer.open({
      type: 1,
      area:['400px','400px'],
      title:'选择上级菜单',
      zIndex:layer.zIndex+1,
      scrollbar:true,
      btn:['确定','取消'],
      content: '<div class="layui-tree" id="menu_tree"></div>', //注意，如果str是object，那么需要字符拼接。
      yes:function (index, layero) {
        if($menuId == null) {
          layer.msg("请选择菜单");
          return;
        }
        $("#parentMenuId").val($menuId);
        $("#parentMenuName").val($menuName);
        layer.close(index);
      },
      btn2:function (index) {
        $menuId = null;
        $menuName = null;
        layer.close(index);
      },
      cancel:function () {
        $menuId = null;
        $menuName = null;
      }

    });

    $.post(basePath+'system/tsMenu/getMenuTree.do', {access_token: layui.data('layuiAdmin').access_token}, function(data){
      var dataObj = eval ("(" + data + ")");
      layui.tree({
        elem: '#menu_tree'
        ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
        ,click: function(node){
          $menuId = node.id;
          $menuName = node.name;
        }
        ,nodes: dataObj
      });
    });

  });

  $("body").on("mousedown",".layui-tree a",function(){
    $(".layui-tree a cite").parent().removeClass('liactive') ; //css('color','#333');
    $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
  });


});




</script>